<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>组件父传子</h3>
      <child abc="123" :count="count"></child>

      <!-- v-for可以给组件使用 -->
      <child2 v-for="(item, index) in list" :key="index" :name="item"></child2>
      <!-- <child2 name="zhangsan"></child2>
      <child2 name="lisi"></child2>
      <child2 name="wangwu"></child2> -->
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 组件之间的状态是不共享的，每个组件要去维护自己的状态

      // 需要跨组件获取数据，组件的传参(跨组件通信)

      // 父传子：
      // 1.在父组件的子组件标签上面添加一个自定义的属性
      // 2.在子组件里面使用props的选项进行接受, 可以使用数组语法
      const Child = {
        props: ["abc", "count"],
        template: `
          <div>
            child - {{ abc }} - {{ count }}
          </div>
        `,
      };

      const Child2 = {
        props: ["name"],
        template: `
          <li>{{ name }}</li>
        `,
      };

      new Vue({
        el: "#app",
        data: {
          count: 10,
          list: ["zhangsan", "lisi", "wangwu", "zhaoliu"],
        },
        components: {
          Child,
          Child2,
        },
      });
    </script>
  </body>
</html>
